<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS DOM2 事件机制</title>
</head>

<style>
    body{
    margin-left: 400px;
    margin-top: 200px;
}
    #parent{
        width: 200px;
        height: 200px;
        background-color: rgb(158, 158, 158);
    }
    #child{
        width: 100px;
        height: 100px;
       background-color: rgb(0, 0, 0);
    }
</style>
<body>
    <div id="parent" >
        <div id="child">

        </div>
    </div>
    <script>
        // html css js 各司其职
        // 所以行内样式要少用
        // js 事件也不要用DOM0,html js 耦合在一起
        // DOM0 和DOM2 混合，不好维护
        // addEventListener 统一用useCapture 能力
    /*     document.getElementById('parent').addEventListener('click',function(event){
           console.log(event.target)
            console.log('parent')
        },true) */
      /*   document.getElementById('parent').addEventListener('click',function(event){
            console.log("我是大盒子")
        },true)
           document.getElementById('child').addEventListener('click',function(event){
            console.log("我是小盒子")
        },true)//改为true 就会打开冒泡 */

        document.getElementById('parent').addEventListener('click',function(event){
            console.log("大盒子---向内")
        },true)
        
document.getElementById('child').addEventListener('click',function(event){
            console.log("小盒子---向内")
        },true)
        
document.getElementById('child').addEventListener('click',function(event){
            console.log("小盒子---向外")
        },false)
        
document.getElementById('parent').addEventListener('click',function(event){
            console.log("大盒子---向外")
        },false)
    </script>
</body>
</html>